﻿@model PhotoGallery.Models.ViewModels.VideoViewModel
@using PhotoGallery.Views
@{
    ViewBag.Title = "Edit";
}
@section javascript{
    <script src="http://malsup.github.com/jquery.form.js"></script>
    <link href="@Url.Content("~/Content/FileUpload.css")" rel="stylesheet" />

    <script src="@Url.Content("~/Scripts/InputTypeFile.js")" type="text/javascript"></script>
    <link href="@Url.Content("~/Content/InputTypeFile.css")" rel="stylesheet" />
}
<h2>@Labels.edit</h2>

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">@Labels.video</a></li>
    <li><a href="#tabs-2">@Labels.otherVideoFormats</a></li>
  </ul>
  <div id="tabs-1">
    
@using (Html.BeginForm("Edit", "Video", FormMethod.Post, new { id = "formUpload", enctype = "multipart/form-data" }))
{
    @Html.ValidationSummary(true)
           
    @Html.HiddenFor(model => model.Video.ID)
    @Html.HiddenFor(model => model.Video.FileName)
    @Html.HiddenFor(model => model.Video.Thumbnail)
    @*<img alt="@Model.Video.Title" src="@Url.Action("Thumbnail", new { file = Model.Video.FullThumbnailName })" />*@
    <img alt="@Model.Video.Title"  src="@Url.Content(Model.Video.UrlThumbnail)" />    
    <div class="editor-label">
        @Labels.uploadVideo:<br>
    </div>
    <div class="editor-field">
        <div class="styleFileInput">        
            <input type="text" class="browseText" /> 
            <input type="button" value="Browse" class="browseButton" /> 
            <input type="file" name="file"  accept="video/*" class="theFileInput validate[required,custom['File is required']"  />
        </div>
    </div>
    if (!Model.Video.AutoGenerateThumnnails)
    {
        <div class="editor-label">
            @Labels.uploadThumbnail:<br>
        </div>
        <div class="editor-field">
            <input type="file" name="thummnail"  accept="image/*" />
        </div>
    }
        
    <div class="editor-label">
        @Html.LabelFor(model => model.Video.Title)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Video.Title)
        @Html.ValidationMessageFor(model => model.Video.Title)
    </div>
    <div class="editor-label">
        @Html.LabelFor(model => model.Video.Description)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Video.Description)
        @Html.ValidationMessageFor(model => model.Video.Description)
    </div>
    <p>
        <input id="btnUpload" type="submit" value="@Labels.save" form="formUpload" />
        <a href="@Html.Encode(@Html.Encode(ViewBag.backUrl))"  class="button-link-100" >@Labels.cancel </a>
    </p>
}
  </div>
  <div id="tabs-2">
        <div class="editor-label">
            <p>@Model.Video.FileName</p>
            <p>@Labels.uploadVideo:</p>
        </div>

        @Html.Action("VideoAttachments", new { Attachments = ViewBag.Attachments, ReturnUrl = ViewBag.backUrl, videoID = Model.Video.ID })

  </div>
    
    <div class="progress">
        <div class="bar"></div >
        <div class="percent">0%</div >
    </div>
<script>
$(function () {
    $("#tabs").tabs();
});
</script>
<script>
(function() {
var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');

$('#formUpload').ajaxForm({
    beforeSend: function() {
        status.empty();
        var percentVal = '0%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
    uploadProgress: function(event, position, total, percentComplete) {
        var percentVal = percentComplete + '%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
	complete: function(xhr) {
	    status.html(xhr.responseText);
	    window.location = '@Url.Action("Index")'
	}
});

$('#formAssociate').ajaxForm({
    beforeSend: function () {
        status.empty();
        var percentVal = '0%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
    uploadProgress: function (event, position, total, percentComplete) {
        var percentVal = percentComplete + '%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
    complete: function (xhr) {
        status.html(xhr.responseText);
        @*window.location = '@Url.Action("Index")'*@
}
});

})();       
</script>
